{% extends "zato/index.html" %}

{% block html_title %}KVDB translations{% endblock %}

{% block "extra_css" %}
    <link rel="stylesheet" type="text/css" href="/static/css/jquery.alerts.css">
{% endblock %}

{% block "extra_js" %}

    {% comment %} jQuery {% endcomment %}
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.tablesorter.min.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.cookie.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.alerts.min.js"></script>

    {% comment %} Common JS {% endcomment %}
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/js/common.js"></script>

    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/js/kvdb/data_dict/translation-common.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/js/kvdb/data_dict/translation.js"></script>

    <script nonce="{{ CSP_NONCE }}">
    $.fn.zato.data_table.get_columns = function() {
        return [
            '_numbering',
            'system1',
            'key1',
            'value1',
            'system2',
            'key2',
            'value2',
            '_edit',
            '_delete',
            'id',
        ]
    }
    </script>

{% endblock %}

{% block "content" %}
<h2 class="zato">Data dictionaries : Translations</h2>

{% if not zato_clusters %}
    {% include "zato/no-clusters.html" %}
{% else %}

    <div id="user-message-div" style='display:none'><pre id="user-message" class="user-message"></pre></div>

{% include "zato/search-form.html" with page_prompt="Show translations"%}


    {% if cluster_id %}
<div class='page_prompt' style="clear:left">
    <a href="{% url "kvdb-data-dict-dictionary" %}?cluster={{ cluster_id }}" class="common">Dictionaries</a>
    <a href="{% url "kvdb-data-dict-translation" %}?cluster={{ cluster_id }}" class="common current">Translations</a>
    <a href="{% url "kvdb-data-dict-impexp" %}?cluster={{ cluster_id }}" class="common">Import/export</a>
    <br/>
    <a href="{% url "kvdb-data-dict-translation-translate" %}?cluster={{ cluster_id }}" class="common">Translate</a>
    <a href="javascript:$.fn.zato.kvdb.data_dict.translation.create()" class="common">Create a new translation</a>
</div>


        <div id="markup">
            <table id="data-table">
                <thead>
                    <tr class='ignore'>
                        <th>&nbsp;</th>
                        <th><a href="#">System1</a></th>
                        <th><a href="#">Key1</a></th>
                        <th><a href="#">Value1</a></th>
                        <th><a href="#">System2</a></th>
                        <th><a href="#">Key2</a></th>
                        <th><a href="#">Value2</a></th>
                        <th>&nbsp;</th>
                        <th>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                </thead>

                <tbody>
                {% if items %}
                {% for item in items %}
                    <tr class="{% cycle 'odd' 'even' %}" id='tr_{{ item.id }}'>
                        <td class='numbering'>&nbsp;</td>
                        <td>{{ item.system1 }}</td>
                        <td>{{ item.key1 }}</td>
                        <td><pre>{{ item.value1 }}</pre></td>
                        <td>{{ item.system2 }}</td>
                        <td>{{ item.key2 }}</td>
                        <td><pre>{{ item.value2 }}</pre></td>
                        <td><a href="javascript:$.fn.zato.kvdb.data_dict.translation.edit('{{ item.id }}')">Edit</a></td>
                        <td><a href="javascript:$.fn.zato.kvdb.data_dict.translation.delete_('{{ item.id }}')">Delete</a></td>
                        <td class='ignore item_id_{{ item.id }}'>{{ item.id }}</td>

                    </tr>
                {% endfor %}
                {% else %}
                    <tr class='ignore'>
                        <td colspan='10'>No results</td>
                    </tr>
                {% endif %}

                </tbody>
            </table>
        </div>

        <div id="create-div" class='data-popup ignore'>
            <div class="bd">
                <form novalidate action="{% url "kvdb-data-dict-translation-create" %}" method="post" id="create-form">
                    <table class="form-data">

                        <tr>
                            <td style="vertical-align:middle;width:20%">System1</td>
                            <td>{{ create_form.system1 }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle;width:20%">Key1</td>
                            <td>{{ create_form.key1 }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle;width:20%">Value1</td>
                            <td>{{ create_form.value1 }}</td>
                        </tr>


                        <tr>
                            <td style="vertical-align:middle;width:20%">System2</td>
                            <td>{{ create_form.system2 }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle;width:20%">Key2</td>
                            <td>{{ create_form.key2 }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle;width:20%">Value2</td>
                            <td>{{ create_form.value2 }}</td>
                        </tr>

                        <tr>
                            <td colspan="2" style="text-align:right">
                                <input type="submit" value="OK" />
                                <button type='button' onclick='javascript:$.fn.zato.data_table.close(this)'>Cancel</button>
                            </td>
                        </tr>
                    </table>
                    <input type="hidden" id="cluster_id" name="cluster_id" value="{{ cluster_id }}" />
                </form>
            </div>
        </div>

        <div id="edit-div" class='data-popup ignore'>
            <div class="bd">
                <form novalidate action="{% url "kvdb-data-dict-translation-edit" %}" method="post" id="edit-form">
                    <table class="form-data">

                        <tr>
                            <td style="vertical-align:middle;width:20%">System1</td>
                            <td>{{ edit_form.system1 }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle;width:20%">Key1</td>
                            <td>{{ edit_form.key1 }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle;width:20%">Value1</td>
                            <td>{{ edit_form.value1 }}</td>
                        </tr>


                        <tr>
                            <td style="vertical-align:middle;width:20%">System2</td>
                            <td>{{ edit_form.system2 }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle;width:20%">Key2</td>
                            <td>{{ edit_form.key2 }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle;width:20%">Value2</td>
                            <td>{{ edit_form.value2 }}</td>
                        </tr>

                        <tr>
                            <td colspan="2" style="text-align:right">
                                <input type="submit" value="OK" />
                                <button type='button' onclick='javascript:$.fn.zato.data_table.close(this)'>Cancel</button>
                            </td>
                        </tr>
                    </table>
                    <input type="hidden" name="cluster_id" value="{{ cluster_id }}" />
                    <input type="hidden" id="id_edit-id" name="id" />
                </form>
            </div>
        </div>

    {% endif %}


{% endif %}{% comment %}not zato_clusters{% endcomment %}

{% endblock %}
